import { View, Text, StyleSheet } from 'react-native'
import React, { useEffect } from 'react'
import { useFocusEffect } from '@react-navigation/native'
import { Button, Container, Input } from 'native-base'
import { connect } from 'react-redux'
import { globalPadding } from '../../style'
import Nickname from './Nickname'
import { useState } from 'react'
import { loginAction } from '../../redux/actionCreator/user'
import axios from '../../axios'

function CommonForm({ navigation, route, user, loginAction }) {
  const { title = '' } = route.params
  const [form, setForm] = useState({
    nickname: user.nickname
  })
  useEffect(() => {
    navigation.setOptions({
      title,
      headerRight: () => (
        <Button onPress={submit}>提交</Button>
      )
    })
  }, [navigation, title])

  const submit = () => {
    axios.put('/avatar', {
      nickname: form.nickname
    }).then(res => {
      loginAction({
        ...user,
        nickname: res.data.nickname
      })
      navigation.goBack()
    }).catch(err => {})
  }
  return (
    <View style={styles.container}>
      <Input value={form.nickname} variant="underlined" onChangeText={(val)=>setForm({
        ...form,
        nickname: val
      })} />
    </View>
  )
}

export default connect((state)=>{
  return {
    user: state.userReducer
  }
}, {
  loginAction
})(CommonForm)

const styles = StyleSheet.create({
  container: {
    ...globalPadding
  }
})